<template>
    <div class="personalAccount">
        <div class="experience_inputs">
            <div class="add_item">
                <div class="my_account">我的账户</div>
                <div class='balance'>账户余额：<p><span>{{personalAccount}}</span>元</p></div>
            </div>
        </div>
         <div class="products">
            <div class="pro_title">产品</div>

            <div class="product_wrap">
                <div v-for='(item,index) in cardsList' :key='index'>
                    <div class="product_item" :style="'border: solid 1px'+item.color">
                        <div class="car_classify"><img :src='item.img'></div>
                        <div class="car_name" :style="'color:'+ item.color">{{item.productname}}</div>
                        <div class="bottom_color" :style="'background-color:'+item.color">
                            <div class="car_price">数量:{{item.leftnum}}</div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import base from '../api/base.js'
    export default{
        data(){
            return{
                formLabelWidth: '200px',
                cardsList:[],
                personalAccount:''
            }
        },
        methods:{
            getCards(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/account-info-lite",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.cardsList=res.data.data.accountinfo
                        this.personalAccount=res.data.data.agentinfo.account
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                });
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            }
        },
        created(){
            this.getCards()
        }
    }
</script>
<style lang="less" scoped>
    .experience_inputs{
        height: 60px;
        box-sizing: border-box;
        background: #f5f5f5;
        padding-top: 10px;
        
        .add_item{
            width: 100%;
            padding:8px;
            letter-spacing: 1px;
            .my_account{
                float:left;
            }
            .balance{
                float:right;
                p{
                    display: inline;
                    color:#ff4a61;
                    span{
                        font-size: 22px;
                    }
                }
            }
        }
    }
    .products{
        background: #ffffff;
        text-align: center;
        padding: 20px 104px;
        .pro_title{
            font-size: 28px;
            letter-spacing: 10px;
            margin-bottom: 30px;
        }
        .product_wrap{
            display:flex;
            flex-wrap:wrap;
            // justify-content: space-between;
        }
    }
     @media screen and (min-width: 768px) {
           .product_item{
               transform: scale(0.4)
           }
           .product_wrap>div{
                height: 90px
            }
        }
    @media screen and (min-width: 1024px) {
            .product_item{
                transform: scale(0.5)
            }
             .product_wrap>div{
                height: 110px
            }
    }
    @media screen and (min-width: 1086px) {
            .product_item{
                transform: scale(0.55)
            }
             .product_wrap>div{
                height: 125px
            }
    }
    @media screen and (min-width: 1200px) {
            .product_item{
                transform: scale(0.6)
            }
             .product_wrap>div{
                height: 140px
            }
    }
    @media screen and (min-width: 1280px) {
        .product_item{
            transform: scale(0.65)
        }
         .product_wrap>div{
                height: 150px
            }
    }
    @media screen and (min-width: 1350px) {
        .product_item{
            transform: scale(0.7)
        }
         .product_wrap>div{
                height: 160px
            }
    }
    @media screen and (min-width: 1440px) {
        .product_item{
            transform: scale(0.8)
        }
         .product_wrap>div{
                height: 200px
            }
    }
    @media screen and (min-width: 1680px) {
        .product_item{
            transform: scale(1)
        }
         .product_wrap>div{
                height: 220px
            }
    }
    .product_item{
        width: 250px;
        background-color: #ffffff;
        border-radius: 10px;
        padding-top: 24px;
        margin:0 30px 30px 0;
    }
    .car_name{
        font-size: 24px;
        line-height: 48px;
    }
    .bottom_color{
        height: 30px;
        border-radius:0 0 6px 6px;
        color: #ffffff;
        padding: 10px 6px;
        text-align: center;
    }
    .car_classify img{
        width: 86px;
        height: 60px;
    }
    .bottom_color .car_price{
        font-size: 20px;
    }
</style>
